<template>
  <div v-if="list1">
    <div class="grey">
      <div class="grey1">
        <div class="yd">
          <img
            src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png"
          />
        </div>
        <div>30天无忧退货</div>
      </div>
      <div class="grey1">
        <div class="yd">
          <img
            src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png"
          />
        </div>
        <div>48小时快速发货</div>
      </div>
      <div class="grey1">
        <div class="yd">
          <img
            src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png"
          />
        </div>
        <div>满88元包邮</div>
      </div>
    </div>
    <div class="cartlist">
      <div class="cartlist1" v-for="item in list1" :key="item.id">
        <div class="cartlist2">
          <div class="cartlist21">
            <van-checkbox
              v-model="item.checked1"
              checked-color="#B4282D"
            ></van-checkbox>
          </div>
        </div>
        <div class="cartlist2"><img :src="item.list_pic_url" /></div>
        <div class="cartlist2">
          <div class="cartlist3">{{ item.goods_name }}</div>
          <div class="cartlist4">￥{{ item.retail_price }}</div>
        </div>
        <div class="right">*{{ item.number }}</div>
      </div>
    </div>
    <div class="xiadan">
      <div class="xiadan1">
        <van-checkbox v-model="allChecked" checked-color="#B4282D"
          >全选</van-checkbox
        >
      </div>
      <div class="xiadan2">
        <div class="xiadan31">{{ totalprice }}</div>
        <div class="xiadan3">下单</div>
      </div>
    </div>
  </div>
</template>

<script>
import { cartlist } from "@/api/cart/list.js";
export default {
  data() {
    return {
      list1: [],
      checked: false,
      // checked1: false,
    };
  },
  computed: {
    totalprice() {
      var num = 0;
      this.list1.forEach(function (ele) {
        if (ele.checked1) {
          num += ele.retail_price * ele.number;
        }
      });
      return num;
    },
    allChecked: {
      get() {
        return this.list1.every((el) => el.checked1);
      },
      set(val) {
        this.list1.forEach((el) => (el.checked1 = val));
      },
    },
  },
  methods: {
      
  },
  created() {
    cartlist({
      openId: "18568185602",
    }).then((res) => {
      console.log(res);

      for (var i = 0; i < res.data.length; i++) {
        res.data[i].checked1 = false;
      }
    //   console.log(res.data)
      this.list1 = res.data;
    });
    console.log(this.list1);
  },
};
</script>

<style lang="scss" scoped>
.grey {
  width: 100%;
  height: 60px;
  background-color: #f4f4f4;
  .grey1 {
    float: left;
    width: 125px;
    height: 60px;
    margin-top: 10px;
  }
  .grey1 div {
    float: left;
    font-size: 13px;
  }
  .yd {
    margin-top: 1px;
    margin-left: 15px;
  }
}
.cartlist {
  width: 100%;
  height: 600px;
}
.cartlist1 {
  position: relative;
  width: 355px;
  height: 80px;
  margin-left: 10px;
}
.cartlist2 {
  float: left;
}
.cartlist2 img {
  width: 62.5px;
  height: 62.5px;
}
.cartlist21 {
  margin-top: 20px;
}
.y {
  width: 20px;
  height: 20px;
  border: 1px solid grey;
  border-radius: 50%;
  margin-top: 20px;
}
.cartlist3 {
  height: 30px;
  line-height: 30px;
}
.cartlist4 {
  height: 30px;
  line-height: 30px;
  text-align: left;
}
.right {
  position: absolute;
  top: 10px;
  left: 280px;
  width: 40px;
  height: 40px;
  line-height: 40px;
}
.xiadan {
  position: fixed;
  width: 100%;
  height: 50px;
  bottom: 50px;
}
.xiadan1 {
  float: left;
  height: 50px;
  line-height: 60px;
  margin-left: 10px;
}
.xiadan2 {
  position: absolute;
  top: 0;
  width: 190px;
  height: 50px;
  left: 210px;
}
.xiadan2 div {
  float: left;
}
.xiadan3 {
  width: 100px;
  height: 50px;
  background-color: #b4282d;
  color: white;
  line-height: 50px;
  font-size: 14px;
}
.xiadan31 {
  width: 60px;
  height: 50px;
  line-height: 50px;
}
</style>
